<template>
	<view class="">
		<view class="zongpaiming">
			<view class="paimingTitle">
				{{$t('instruPanel.title11')}}
			</view>
			<view class="paimingForm paimingFormTow">
				<view class="paimingFormIt">
					{{$t('instruPanel.title11')}}
				</view>
				<view class="paimingFormIt">
					{{$t('allocation.title20')}}
				</view>
				<view class="paimingFormIt">
					{{$t('login.title15')}}
				</view>
				<view class="paimingFormIt">
					{{$t('allocation.title26')}}
				</view>
				<view class="paimingFormIt">
					{{$t('allocation.title21')}}
				</view>
			</view>
			<view class="paimingForm" style="margin-top: 0;" v-if="list.length > 0" v-for="(item,index) in list" :key="index">
				<view class="paimingFormIt" v-if="index < 3">
					<image v-if="index == 0" src="../../static/tian/1.png" class="icon" mode=""></image>
					<image v-if="index == 1" src="../../static/tian/2.png" class="icon" mode=""></image>
					<image v-if="index == 2" src="../../static/tian/3.png" class="icon" mode=""></image>
				</view>
				<view v-if="index >= 3" class="paimingFormIt">{{index + 1}}</view>
				<view class="paimingFormIt">
					{{item.address.substring(0,3)}}****{{item.address.substr(-3)}}
				</view>
				<view class="paimingFormIt">
					{{item.area}}
				</view>
				<view class="paimingFormIt">
					{{item.team}}
				</view>
				<view class="paimingFormIt">
					{{item.uid}}
				</view>
			</view>
			<view style="width: 100%;text-align: center;margin-top: 50rpx;" v-if="list.length == 0">
				<image src="../../static/img/empty.png" style="width: 50px;height: 50px;"></image>
				<p> {{$t('first.title44')}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import { domains } from '../../config/domain.js'
	export default {
		components: {},
		data() {
			return {
				list:[]
			};
		},
		onLoad() {
			this.getlist()
		},
		onReady() {
		},
		onShow() {
		},
		methods: {
			getlist(){
				let url = domains + 'api/user/ranks';
				let mytype = 'get';
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':uni.getStorageSync('tokenNum')
					},
					success: res => {
						if(res.data.code==1){
							this.list = res.data.data
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							}); 
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.zongpaiming {
		width: 93%;
		background-color: #f1f3ff;
		border-radius: 5px;
		padding: 15px;
		margin: 10px auto;
	}

	.paimingTitle {
		font-size: 18px;
		color: #000;
		font-weight: 600;
	}

	.paimingForm {
		width: 100%;
		display: flex;
		height: 35px;
		margin-top: 10px;
		font-size: 12px;
		align-items: center;
	}

	.paimingFormTow {
		background-color: #278cf4;
		color: #fff;
	}

	.paimingFormIt {
		flex: 1;
		text-align: center;
	}

	.paimingForm:nth-child(2) .paimingFormIt:nth-child(1) {
		width: 20%;
		// border-right: 1px solid #fff;
	}

	.paimingForm:nth-child(3) .paimingFormIt {
		color: #278cf4;
	}

	.paimingForm:nth-child(3) .paimingFormIt:nth-child(1) {
		color: #333;
	}
	.icon{
		width: 50rpx;
		height: 50rpx;
	}
</style>